<template>
	<view class="flow-box" :style="'height: ' + loadingTop + 'px'">
		<view class="item"
			:class="left[index] == 1 ? 'left' : ''"
			:style="'top:' + top[index] + 'px;'"
			v-for="(item, index) in newList" :key="index"
			:data-index="index">
			<view class="pic">
				<image class="image" mode="widthFix" :src="item.images[0]" @click.stop="to_detail(item)" style="width: 100%; display: block;" ></image>
			</view>
			<view class="content">
				<text>{{item.title}}</text>
				<view class="user">
					<view style="flex: 1.3;">
						<image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;"
							:src="item.real_head_img"></image>
						{{item.user_name}}
					</view>
					<view style="flex: 1;text-align: right;" >
						<!-- 2为点赞状态 -->
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode="" v-if="item.is_like == 1" @click.stop="yes_no(item)"></image>
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan1.png" mode="" v-if="item.is_like == 2" @click.stop="yes_no(item)"></image>
						<text>{{item.likeCount}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 数据列表
			waterList: {
				type: Array,
				default() {
					return []
				}
			},
			// 加载动画
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				mark: 0,
				newList: [],
				boxHeight: [],
				top: [], 
				left: [],
				loadingTop: 0
			}
		},
		watch: {
			// 数据
			waterList: function (newVal, oldVal) {
				this.mark = oldVal.length;
				if (newVal != oldVal) {
					this.newList = this.waterList;
					this.$nextTick(function () {
						setTimeout(() => {
							this.waterFall();
						}, 120)
					})
				}
			}
		},
		methods: {
			// 瀑布流定位
			waterFall() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.flow-box .item').boundingClientRect(res => {
					let len = this.newList.length;
					let height = 0;
					for (let i = this.mark; i < len; i++) {
						height = res[i].height;
						if (i < 2) {
							this.$set(this.newList[i], 'top', 0);
							this.$set(this.newList[i], 'left', i);
							this.boxHeight.push(height);
							this.top.push(0);
							this.left.push(i);
						} else {
							let minHeight = this.boxHeight[0];
							let index = 0;
							if (minHeight > this.boxHeight[1]) {
								minHeight = this.boxHeight[1];
								index = 1;
							}
							this.boxHeight[index] = minHeight + height + 5;
							this.top.push(minHeight + 5);
							this.left.push(index);
							this.$set(this.newList[i], 'top', minHeight + 5);
							this.$set(this.newList[i], 'left', index);
							this.loadingTop = this.boxHeight[index];
						}
					}
				}).exec();
			},
			// 选中
			yes_no(item) {
				this.$emit('yes_no', item);
			},
			to_detail(item){
				this.$emit('to_detail', item);
			},
		}
	}
</script>

<style scoped>
	.flow-box {
		position: relative;
		color: #1a1a1a;
		padding-bottom: var(--window-bottom);
	}
	.flow-box .item {
		position: absolute;
		left: 10upx;
		width: calc(50% - 20upx);
		border: 1upx solid #f9f9f9;
		background: #fff;
	}
	.flow-box .left {
		left: 380upx;
	}
	.flow-box .pic {
		background: #f6f6f6;
	}
	.flow-box .content {
		padding: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.flow-box .content text {
		width: 100%;
		font-size: 24upx;
		margin-bottom: 20upx;
	}
	.flow-box .user {
		display: flex;
		width: 100%;
		overflow: hidden;
		font-size: 26upx;
		color: #666;
	}
	.loading {
		position: absolute;
		width: 100%;
		text-align: center;
		padding: 20upx 0;
	}
</style>
